<template lang="pug">
  div.module
   div.label="2020年主要产业指标"
    div.static-row
      div.static-card(v-for="(item, index) in medicalData" :key="index")
        StaticCompareView(:itemData="item" :suffix="item.suffix")
</template>


<script>
import StaticCompareView from "./StaticCompareView";

export default {
  name: "ModuleMedicalData",
  components: {
    StaticCompareView,
  },
  data() {
    return {
      medicalData: [
        {
          label: '永定街道办事处',
          // value: 44984,
          decimals: 1,
          suffix: '人',
          area: {
            label: '乡村人口',
            value: 44984,
          },
          production: {
            label: '耕地保有量',
            value: 6.3,
          },
        },
        {
          label: '大营街道办事处',
          // value: 44984,
          decimals: 1,
          suffix: '人',
          area: {
            label: '乡村人口',
            value: 34120,
          },
          production: {
            label: '耕地保有量',
            value: 3,
          },
        },
        {
          label: '罗免镇',
          // value: 44984,
          decimals: 1,
          suffix: '人',
          area: {
            label: '乡村人口',
            value: 14731,
          },
          production: {
            label: '耕地保有量',
            value: 2315.71,
          },
        },
        {
          label: '赤鹫镇',
          // value: 44984,
          decimals: 1,
          suffix: '人',
          area: {
            label: '乡村人口',
            value: 9740,
          },
          production: {
            label: '耕地保有量',
            value: 3.47,
          },
        },
        {
          label: '散旦镇',
          // value: 44984,
          decimals: 1,
          suffix: '人',
          area: {
            label: '乡村人口',
            value: 10881,
          },
          production: {
            label: '耕地保有量',
            value: 2.4,
          },
        },
        {
          label: '款庄镇',
          // value: 44984,
          decimals: 1,
          suffix: '人',
          area: {
            label: '乡村人口',
            value: 22183,
          },
          production: {
            label: '耕地保有量',
            value: 5.28,
          },
        },
        {
          label: '东村镇',
          // value: 44984,
          decimals: 1,
          suffix: '人',
          area: {
            label: '乡村人口',
            value: 14365,
          },
          production: {
            label: '耕地保有量',
            value: 3.4,
          },
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.static-row{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: rem(20);
  .static-card{
    margin: 0 rem(14) rem(14);
    padding: rem(10) rem(30);
    position: relative;
    /* Google Chrome */
    backdrop-filter: blur(5px);
    background: rgba(0, 73, 104, 0.26);
    min-width: rem(220);
    box-sizing: border-box;
    &:before,
    &:after{
      content: '';
      display: block;
      @include size(rem(6), rem(8));
      position: absolute;
      right: rem(10);
    }
    &:before{
      top: rem(10);
      border-top: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
    &:after{
      bottom: rem(10);
      border-bottom: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
  }
}
.module{
	.label{
		font-size: rem(22);
		color: #fff;
		margin-left: rem(82);
		justify-content: flex-end;
	}
}
</style>
